import React from 'react'
import {Button, Modal, Form, Card} from 'antd'
import {InputGroup} from "./NodeEditComponents/InputGroup"
import {SelectGroup} from "./NodeEditComponents/SelectGroup"
import {FlowConst} from "../Const";
import {PredefinedInfoConst} from "../Const/PredefinedInfoConst";


export class NodeEditor extends React.Component {

  constructor(props) {
    super(props)

    this.handleSubmit = this.handleSubmit.bind(this)

    if (!props.node || !props.node.id) {
      return
    }

    this.state = {
      newNode: {
        name: props.node.name,
        type: '0',
        mapper: '0',
        process: '0',
        resource: '0',
      },
      visible: false
    }
  }


  handleSubmit(e) {
    alert("submit")
  }

  render() {
    const {hideModal, isOpen, node} = this.props


    if (!node || !node.id) {
      return (<div></div>)
    }

    const content = node && typeof node.serialize === 'function' ? JSON.stringify(node.serialize(), null, 2) : ''

    const formItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 20},
    };

    return (
      <Modal width={800} visible={isOpen}
             onOk={hideModal}
             onCancel={hideModal}
             destroyOnClose = {true}

             title={this.state.newNode.name}
             footer={[
               <Button type="danger">Reset</Button>,
               <Button type="primary" onClick={this.handleSubmit}>Submit</Button>,
               <Button type="secondary" onClick={hideModal}>Cancel</Button>
             ]}
      >
        <Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
          <InputGroup formItemLayout={formItemLayout} id={node.id + "node-name-editor"} label='Node Name'
                      value={this.state.newNode.name} answer={PredefinedInfoConst.ANSWER_FOR_NAME_OF_NODE_EDITOR}/>
          <SelectGroup formItemLayout={formItemLayout} id={node.id + "type-editor"} label='Type'
                       value={this.state.newNode.type} answer={PredefinedInfoConst.ANSWER_FOR_TYPE_EDITOR}/>
          <SelectGroup formItemLayout={formItemLayout} id={node.id + "mapper-editor"} label='Mapper'
                       value={this.state.newNode.mapper} answer={PredefinedInfoConst.ANSWER_FOR_INPUT_MAPPER_EDITOR}/>
          <SelectGroup formItemLayout={formItemLayout} id={node.id + "process-editor"} label='Process'
                       value={this.state.newNode.process} answer={PredefinedInfoConst.ANSWER_FOR_PROCESS_EDITOR}/>
          <SelectGroup formItemLayout={formItemLayout} id={node.id + "resource-editor"} label='Resource'
                       value={this.state.newNode.resource} answer={PredefinedInfoConst.ANSWER_FOR_RESOURCE_EDITOR}/>
        </Form>
      </Modal>
    )
  }
}
